<template>
  <div id="dataStatistics">
    <div class="section1">
      <h3>
        <span>SIM卡统计</span>
      </h3>
      <div>
        <div
          class="icon-arrow-left pointer"
          v-show="statisticScrollLeftShow"
          @click="scrollLeft('dataStatistics-scrollPanel-1')"
        >
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="tag-defined-panel" id="dataStatistics-scrollPanel-1">
          <div class="tag-defined">
            <div class="tag-defined-flex" style="color: #2b90ff">
              <img src="../../../assets/top_icon_1.png" alt="" srcset=""/>
              <div>
                <p>
                  <!-- <i class="el-icon-coin"></i>  -->
                  总数</p>
                <h1>{{ number_format(simAll.totalSim) }}</h1>
              </div>
            </div>
          </div>
          <div class="tag-defined pointer" @click="goToCardList(null, '2')">
            <div class="tag-defined-flex" style="color: #2ec786">
              <img src="../../../assets/top_icon_2.png" alt="" srcset=""/>
              <div>
                <p>
                  <!-- <i class="el-icon-odometer"></i>  -->
                  正常使用</p>
                <h1>{{ number_format(simAll.activeSim) }}</h1>
              </div>
            </div>
          </div>
          <div class="tag-defined pointer" @click="goToCardList(null, '3')">
            <div class="tag-defined-flex">
              <img src="../../../assets/top_icon_7.png" alt="" srcset=""/> 
              <div style="color: #f44336">
                <p>
                  <!-- <i class="el-icon-remove-outline"></i>  -->
                  已停机</p>
                <h1>{{ number_format(simAll.pauseSim) }}</h1>
              </div>
            </div>
          </div>
          <div class="tag-defined pointer" @click="goToCardList(85, null)">
            <div class="tag-defined-flex">
              <img src="../../../assets/top_icon_8.png" alt="" srcset=""/> 
              <div style="color: #eb6527">
                <p>
                  <!-- <i class="el-icon-warning-outline"></i>  -->
                  阈值预警</p>
                <h1>{{ number_format(simAll.moreThanSim) }}</h1>
              </div>
            </div>
          </div>
          <div class="tag-defined pointer" @click="goToEndTimeList()">
            <div class="tag-defined-flex">
              <img src="../../../assets/top_icon_5.png" alt="" srcset=""/> 
              <div style="color: #eb6527">
                <p>
                  <!-- <i class="el-icon-warning-outline"></i>  -->
                  即将到期</p>
                <h1>{{ number_format(simAll.expiringSim) }}</h1>
              </div>
            </div>
          </div>
          <div class="tag-defined pointer" @click="goToCardList(null, '1')">
            <div class="tag-defined-flex">
              <img src="../../../assets/top_icon_3.png" alt="" srcset=""/>
              <div style="color: #8cacc5">
                <p>
                  <!-- <i class="el-icon-aim"></i>  -->
                  沉默期</p>
                <h1>{{ number_format(simAll.activingSim) }}</h1>
              </div>
            </div>
          </div>
           <div class="tag-defined pointer" @click="goToCardList(null, '1')">
            <div class="tag-defined-flex">
              <img src="../../../assets/top_icon_3.png" alt="" srcset=""/>
              <div style="color: #8cacc5">
                <p>
                  <!-- <i class="el-icon-aim"></i>  -->
                  库存期</p>
                <h1>{{ number_format(simAll.kucun) }}</h1>
              </div>
            </div>
          </div>
          <div class="tag-defined pointer" @click="goToCardList(null, '4')">
            <div class="tag-defined-flex">
              <img src="../../../assets/top_icon_4.png" alt="" srcset=""/>
              <div style="color: #009486">
                <p>
                  <!-- <i class="el-icon-attract"></i>  -->
                  可测试</p>
                <h1>{{ number_format(simAll.testSim) }}</h1>
              </div>
            </div>
          </div>
          <div class="tag-defined pointer" @click="goToCardList(null, '44')">
            <div class="tag-defined-flex">
              <img src="../../../assets/top_icon_6.png" alt="" srcset=""/> 
              <div style="color: #ff1100">
                <p>
                  <!-- <i class="el-icon-circle-close"></i>  -->
                  已过期</p>
                <h1>{{ number_format(simAll.alreadyExpire) }}</h1>
              </div>
            </div>
          </div>
        </div>

        <div
          class="icon-arrow-right pointer"
          v-show="statisticScrollRightShow"
          @click="scrollRight('dataStatistics-scrollPanel-1')"
        >
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
    <div class="section2 clearfix">
      <div v-for="(item, index) in suppliersSim" :key="index" class="item">
        <h3>
          <span>{{ item.supplierName }}</span>
          <span style="font-size:14px;color:#727381">SIM卡总数<span style="font-size:28px;color:#3F3F41">{{ item.totalSim }}</span></span>
        </h3>
        <div
          :id="'tjSim' + index"
          :ref="'tjSim' + index"
          style="height: 300px; width: 100%"
        ></div>
        <!-- <div class="info">
          <div>
            <span style="color: #000">{{ item.totalSim }}</span
            ><br />SIM卡总数
          </div>
          <div class="blue-color">
            <span class="blue-color">{{ item.activingSim }}</span
            ><br />待激活
          </div>
          <div class="green-color">
            <span class="green-color">{{ item.activeSim }}</span
            ><br />已激活
          </div>
          <div class="yellow-color">
            <span class="yellow-color">{{ item.pauseSim }}</span
            ><br />已停机
          </div>
        </div> -->
      </div>
    </div>
    <div class="section3">
      <!-- <div  class="everyDayLine">
                <div>
                    <h3>
                        <span>本月流量消耗</span>
                    </h3>
                    <div id="everyDayFlux" class="everyDayFlux" style="width: 100%;height: 300px;"></div>
                </div>

                <div>
                    <h3>
                        <span>本月短信消耗</span>
                    </h3>
                    <div id="everyDaySms" class="everyDaySms" style="width: 100%;height: 300px;"></div>
                </div>
                
            </div> -->
      <div class="top5Table">
        <div class="top5Table-item">
          <h3>
            <span>本月流量消耗TOP5</span>
          </h3>
          <div id="top5Flux" class="top5Flux">
            <div v-for="item in tableTop5" :key="item.id">
              <p>ICCID：{{ item.iccid }}</p>
              <div style="display: flex;align-items: center;">
                <div class="progressBackground">
                  <div
                    class="progress"
                    v-bind:style="{
                      width: getScale(item.useFlow, tableTop5[0].useFlow),
                    }"
                  ></div>
                </div>
                <div class="progressNumber">{{ item.useFlow }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="top5Table-item">
          <h3>
            <span>本月短信消耗TOP5</span>
          </h3>
          <div id="top5Sms" class="top5Flux">
            <div v-for="item in smsTop5" :key="item.id">
              <p>ICCID：{{ item.iccid }}</p>
              <div style="display: flex;align-items: center;">
                <div class="progressBackground">
                  <div
                    class="progress"
                    style="background:#47C8A3"
                    v-bind:style="{
                      width: getScale(item.useMessage, smsTop5[0].useMessage),
                    }"
                  ></div>
                </div>
                <div class="progressNumber">
                  {{ item.useMessage ? item.useMessage : 0 }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>    
<script>
import {
  getDataSummary,
  getSmsTopfive,
  getAdminEveDaySms,
  getAdminEveDayFlow,
} from "@/api/home.js";
var echarts = require("echarts"); // 引入 ECharts 主模块
export default {
  data() {
    return {
      simAll: {
        testSim: 0,
        totalSim: 0,
        activeSim: 0,
        activingSim: 0,
        expiringSim: 0,
        pauseSim: 0,
        useTotalData: 0,
        moreThanSim: 0,
        alreadyExpire: 0,
      },
      suppliersSim: [],
      tableTop5: [],
      smsTop5: [],

      everyDayFluxData: [],
      everyDaySmsData: [],

      //滚动数据
      scrollValOne: 0,
      statisticScrollLeftShow: false,
      statisticScrollRightShow: false,
    };
  },
  methods: {
    //跳转到卡片列表
    goToCardList(cardDataLevel, cardState) {
      this.$store.commit("menu/setFromPage", "dataSummary");
      this.$store.commit("menu/setCardDataLevel", cardDataLevel);
      this.$store.commit("menu/setCardState", cardState);
      document.getElementById("cardList").click();
    },
    //跳转到到期卡列表
    goToEndTimeList() {
      document.getElementById("endTimeList").click();
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex == 0 || rowIndex % 2 == 0) {
        return "green-row";
      } else if (rowIndex % 3 == 0) {
        return "yellow-row";
      } else {
        return "blue-row";
      }
    },

    getScale(numerator, denominator) {
      if (numerator && denominator) {
        return (numerator / denominator) * 80 + "%";
      } else {
        return 0;
      }
    },

    //每日流量、每日短信折线图
    drawEveryDayLineChart(elementId, lineData) {
      let data = lineData;

      //日期
      var dateList = data.map(function (item) {
        return item[0];
      });

      //值
      var valueList = data.map(function (item) {
        return item[1];
      });

      var myChart = echarts.init(document.getElementById(elementId));
      var option = {
        // Make gradient line here
        visualMap: {
          show: false,
          type: "continuous",
          seriesIndex: 1,
          dimension: 0,
          min: 0,
          max: dateList.length - 1,
        },

        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: dateList,
        },
        yAxis: {
          splitLine: { show: false },
        },

        grid: {
          left: "10%", //组件离容器左侧的距离
          right: "10%",
          top: "5%",
          bottom: "10%",
        },

        series: {
          type: "line",
          showSymbol: false,
          data: valueList,
          lineStyle: {
            width: 0,
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#3FA6E7",
              },
              {
                offset: 1,
                color: "#2FC587",
              },
            ]),
          },
        },
      };

      myChart.setOption(option);
    },

    scrollLeft(element) {
      let w =
        document.getElementById(element).clientWidth ||
        document.getElementById(element).offsetWidth;

      if (this.scrollValOne >= document.getElementById(element).scrollWidth) {
        this.scrollValOne =
          document.getElementById(element).scrollWidth - w - w / 2;
      } else if (this.scrollValOne > 0) {
        this.scrollValOne = this.scrollValOne - w;
      }

      if (this.scrollValOne <= 0) {
        this.scrollValOne = 0;
        this.statisticScrollLeftShow = false;
      }

      document.getElementById(element).scrollTo({
        left: this.scrollValOne,
        behavior: "smooth",
      });

      this.statisticScrollRightShow = true;
    },

    scrollRight(element) {
      let w =
        document.getElementById(element).clientWidth ||
        document.getElementById(element).offsetWidth;

      if (
        document.getElementById(element).scrollWidth - this.scrollValOne <=
        w + w / 2
      ) {
        this.scrollValOne = document.getElementById(element).scrollWidth;
      } else {
        this.scrollValOne = this.scrollValOne + w / 2;
      }

      if (this.scrollValOne >= document.getElementById(element).scrollWidth) {
        this.scrollValOne = document.getElementById(element).scrollWidth;
        this.statisticScrollRightShow = false;
      }

      document.getElementById(element).scrollTo({
        left: this.scrollValOne,
        behavior: "smooth",
      });
      this.statisticScrollLeftShow = true;
    },

    drawTjSim() {
      this.suppliersSim.forEach((item, index) => {
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById("tjSim" + index));
          var options = {
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b}: {c} ({d}%)",
            },
            legend: {
              // orient: "vertical",
              // x: "left",
              left: 'center',
              // top:'bottom',
              bottom:'5%',
              data: ["待激活", "已激活", "已停机"],
              itemGap: 40
            },
            series: [
              {
                name: "SIM卡统计",
                type: "pie",
                radius: ["50%", "25%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    position: "outside",
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: "22",
                    },
                  },
                },
                labelLine: {
                  normal: {
                    position: "outside",
                    length: 50,
                  },
                },
                color: ["#06C76B", "#8F8FFF", "#0A9FFF"],
                data: [],
              },
            ],
          };
          options.series[0].data = [
            { value: item.activingSim, name: "待激活" },
            { value: item.activeSim, name: "已激活" },
            { value: item.pauseSim, name: "已停机" },
          ];
          myChart.setOption(options);
        });
      });
    },
  },

  created() {
    getDataSummary().then((res) => {
      if (res.data.code == 200) {
        var result = res.data.data;
        this.suppliersSim = result.infosList;
        this.tableTop5 = result.dataTop;
        for (var key in this.simAll) {
          this.simAll[key] = result[key];
        }
      } else {
        this.$message.error(res.data.message);
      }
    });

    getSmsTopfive().then((res) => {
      if (res.data.code == 200) {
        this.smsTop5 = res.data.data;
      } else {
        this.$message.error(res.data.message);
      }
    });

    // //本月每日流量
    // getAdminEveDayFlow({}).then((res) => {
    //   if (res.data.code == 200) {
    //     this.everyDayFluxData = res.data.data;
    //   } else {
    //     this.$message.error(res.data.message);
    //   }
    // });

    //本月每日短信
    // getAdminEveDaySms({}).then((res) => {
    //   if (res.data.code == 200) {
    //     this.everyDaySmsData = res.data.data;
    //   } else {
    //     this.$message.error(res.data.message);
    //   }
    // });
  },

  mounted() {
    let w =
      document.getElementById("dataStatistics-scrollPanel-1").clientWidth ||
      document.getElementById("dataStatistics-scrollPanel-1").offsetWidth;
    if (
      document.getElementById("dataStatistics-scrollPanel-1").scrollWidth > w
    ) {
      this.statisticScrollRightShow = true;
    }
  },

  watch: {
    everyDaySmsData: function () {
      this.drawEveryDayLineChart("everyDaySms", this.everyDaySmsData);
    },

    everyDayFluxData: function () {
      this.drawEveryDayLineChart("everyDayFlux", this.everyDayFluxData);
    },

    suppliersSim: function () {
      this.drawTjSim();
      let w =
        document.getElementById("dataStatistics-scrollPanel-1").clientWidth ||
        document.getElementById("dataStatistics-scrollPanel-1").offsetWidth;
      if (
        document.getElementById("dataStatistics-scrollPanel-1").scrollWidth > w
      ) {
        this.statisticScrollRightShow = true;
      }

      console.log(this.statisticScrollRightShow);
    },
  },
};
</script>  
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
#dataStatistics {
  background: #F9F9FA;
  .section1,
  .section2 {
    margin-bottom: 10px;
  }
  .section2 {
    margin-top: 30px;
    padding: 0 20px 0 10px;
    display: flex;
    justify-content: space-between;
  }

  .item {
    flex: 1;
    width: 491px;
    height: 370px;
    margin-right: 20px;
    margin-bottom: 20px;
    background: #fff;
    // border: 1px solid #cfcfcf;
    // box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    // border-radius: 3px;
    border-radius: 16px;

    h3 + div {
      // border-top: 1px solid #cfcfcf;
    }
  }

  .item:last-child {
    margin-right: 0;
  }

  h3 {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    padding: 10px;
    span {
      padding-left: 10px;
      // border-left: 4px solid #409eff;
    }
  }
  .info {
    display: flex;
    justify-content: space-around;
    line-height: 2em;
    div {
      text-align: center;
      span {
        color: #409eff;
      }
    }
  }

  .section1 {
    > div {
      margin-top: 10px;
      height: 103px;
      overflow-y: hidden;

      .icon-arrow-left,
      .icon-arrow-right {
        display: inline-block;
        width: 30px;
        line-height: 103px;
        vertical-align: top;
        font-size: 26px;
        text-align: center;
        transition: 0.5s;
      }

      .icon-arrow-left:hover,
      .icon-arrow-right:hover {
        color: #409eff;
        transition: 0.3s;
      }

      .icon-arrow-left {
        position: absolute;
        left: 0;
        box-shadow: 10px 0px 10px #fff;
        background: #fff;
      }

      .icon-arrow-right {
        position: absolute;
        right: 0;
        box-shadow: -10px 0px 10px #fff;
        background: #fff;
      }

      .tag-defined-panel {
        width: 100%;
        white-space: nowrap;
        overflow-x: scroll;
        display: inline-block;

        .tag-defined {
          display: inline-block;
          min-width: 200px;
          margin-bottom: 20px;
          padding: 0 10px;

          img{
            width: 50px;
            height: 50px;
          }

          div.tag-defined-flex{
            display: flex;
            align-items: center;
            justify-content: center;
            // width: 188px;
            height: 96px;
            background: #fff;
            border-radius: 16px;
          }
          div {
            // border: 1px solid #e8e8e8;
            // background: #f9f9f9;
            // transition: 0.5s;

            h1 {
              // font-size: 30px;
              color: #3F3F41;
              font-size: 28px;
              // height: 65px;
              // line-height: 65px;
              // letter-spacing: 1px;
              padding-left: 10px;
            }

            p {
              // font-size: 16px;
              font-size: 14px;
              height: 36px;
              line-height: 36px;
              letter-spacing: 1px;
              padding-left: 10px;
              color: #727381;

              i {
                font-size: 18px;
                transition: 0.5s;
              }
            }
          }

          div:hover {
            border: 1px solid #3490ee;
            background: #ddf4ff;
            transition: 0.5s;
          }
        }
      }
    }
  }

  .green-color {
    color: #2ec786 !important;
  }

  .blue-color {
    color: #419fff !important;
  }

  .yellow-color {
    color: #ff7738 !important;
  }

  .grey-color {
    color: #9d9fa1 !important;
  }

  .el-table th {
    background: #d9ecff;
  }

  .pointer {
    cursor: pointer;
  }

  .section3 {
    // display: flex;
    margin-top: 40px;

    // .everyDayLine{
    //     flex: 2;
    //     margin-right: 10px;

    //     > div{
    //         height: 350px;
    //         margin-left: 10px;
    //         margin-bottom: 20px;
    //         background:rgba(255,255,255,1);
    //         border: 1px solid #cfcfcf;
    //         box-shadow:3px 3px 5px rgba(0,0,0,0.2);
    //         border-radius:3px;
    //     }
    // }

    .top5Table {
      // flex: 1;
      display: flex;
      justify-content: space-around;

      .top5Table-item {
        width: 48%;
        min-height: 350px;
        border: 1px solid #cfcfcf;

        margin-bottom: 20px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
        border-radius: 3px;

        h1,
        > div {
          padding-left: 20px;
          padding-right: 20px;
        }

        .top5Flux {
          > div {
            margin-top: 20px;

            .progressBackground {
              height: 12px;
              background: #E0E9F1;
              width: 90%;
              border-radius: 14px;
              .progress {
                display: inline-block;
                width: 1%;
                height: 12px;
                line-height: 12px;
                float: left;
                // background: linear-gradient(to right, #2ec787, #2b90ff);
                background: #9795F3;
                width: 80%;
                border-radius: 14px;
              }

              .progressNumber {
                font-size: 16px;
                display: inline-block;
                max-width: 10%;
                height: 12px;
                line-height: 12px;
                // float: right;
                padding-left: 5px;
                // color: red;
                color: #3D3954;
              }

              .progressNumber:after {
                clear: both;
              }
            }
          }
          p {
            font-size: 14px;
            color: #7986A9;
          }
        }
      }
    }
  }
}
</style>